<template>
  <div class="device-detail">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="设备名称">
        {{ device?.name || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="设备ID">
        {{ device?.deviceId || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="IP地址">
        {{ device?.ipAddress || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="端口">
        {{ device?.port || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="制造商">
        {{ device?.manufacturer || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="型号">
        {{ device?.model || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="getDeviceStatusType(device?.status)">
          {{ getDeviceStatusLabel(device?.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="启用状态">
        <el-tag :type="device?.enabled ? 'success' : 'danger'">
          {{ device?.enabled ? '已启用' : '已禁用' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ formatTime(device?.createdAt) }}
      </el-descriptions-item>
      <el-descriptions-item label="更新时间">
        {{ formatTime(device?.updatedAt) }}
      </el-descriptions-item>
      <el-descriptions-item label="描述" :span="2">
        {{ device?.description || '-' }}
      </el-descriptions-item>
    </el-descriptions>
    
    <div class="device-detail-footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="handleEdit">编辑</el-button>
    </div>
  </div>
</template>

<script setup>
import { DEVICE_STATUS_LABELS, DEVICE_STATUS_COLORS } from '@/utils/constants'
import { formatRelativeTime } from '@/utils/common'

const props = defineProps({
  device: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['close', 'edit', 'refresh'])

const getDeviceStatusType = (status) => {
  return DEVICE_STATUS_COLORS[status] || 'info'
}

const getDeviceStatusLabel = (status) => {
  return DEVICE_STATUS_LABELS[status] || status
}

const formatTime = (time) => {
  if (!time) return '-'
  return new Date(time).toLocaleString()
}

const handleClose = () => {
  emit('close')
}

const handleEdit = () => {
  emit('edit', props.device)
  handleClose()
}
</script>

<style scoped>
.device-detail {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.device-detail-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>